<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        title="通行门禁"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
        <!--
            <el-form-item label="发卡模式" prop="model">
                <el-select
                    v-model="formData.model"
                    placeholder="请选择发卡模式"
                >
                    <el-option
                        v-for="item in modelData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        -->
            <el-form-item label="二维码协议" prop="qrcode_protocal">
                <el-select v-model="formData.qrcode_protocal" placeholder="请选择二维码协议">
                    <el-option v-for="item in doorGysCodeData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="使用状态" prop="status">
                <el-select
                    v-model="formData.status"
                    placeholder="请选择使用状态"
                >
                    <el-option
                        v-for="item in statusData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: 'doorTrafficParam',
    mixins: [mixinDialogForm]
})
export default class doorTrafficParam extends Vue {
    @Action("parkParkset/doorTraffic") itemEdit: any;
    @State((state) => state.sharing.doorGysCode) doorGysCodeData: any;
    editInit(data: any) {
        this.formData.yard_sn = data.yard_sn;
        this.formData.param_sn = data.param_sn;
        this.formData.qrcode_protocal = data.param_content.qrcode_protocal;
        this.formData.status = data.status;
        this.formData.model = data.param_content.model;
    }
    // v-if="['xsj'].includes(formData.param_gys)"
    // 表单数据
    formData: any = {
        yard_sn: "",
        param_sn: "",
        status: "",
        qrcode_protocal: "",
        model: 1    
    };
    statusData: any = [
        { label: '启用', value: 1 },
        { label: '禁用', value: 2 }
    ];
    modelData: any = [
        { label: '卡号模式', value: 1 },
        { label: '密钥模式', value: 2 }
    ];
    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        param_sn: [
            {
                required: true
            }
        ],
        status: [
            {
                required: true,
                message: "请选择使用状态"
            }
        ],
        model: [
            {
                required: true,
                message: "请选择发卡模式"
            }
        ]
    };
}
</script>
